import React, { useMemo } from "react";
import { globalContainer } from "@/user.InterfaceLayer/constants/styles/CommonStyles";
import PhoneMaskOrganisms from "../../UI_KIT/Organisms/PhoneMask.Organisms";
import Logo from "../../UI_KIT/Atoms/Logo.Atom";
import IconsMenuMolecule from "../../UI_KIT/Molecules/IconsMenu.molecule";
import { useTranslation } from "react-i18next";
import MenuLinksAtom from "../../UI_KIT/Atoms/MenuLinks.Atom";

interface MenuTopProps {}

const MenuTop: React.FC<MenuTopProps> = () => {
  const { t } = useTranslation();
  const catalogItems = useMemo(
    () => t("Catalog", { returnObjects: true }),
    [t]
  ) as [];

  return (
    <div className={`${globalContainer}`}>
      <div className="grid grid-cols-[1fr_min-content_1fr] grid-rows-[auto_min-content] py-4">
        <nav className="flex w-full items-center justify-start gap-4">
          <MenuLinksAtom items={catalogItems} />
        </nav>
        <div className="flex items-center justify-around w-[60px]">
          <Logo />
        </div>
        <div className="flex w-full items-center justify-end gap-6">
          <PhoneMaskOrganisms />
          <IconsMenuMolecule />
        </div>
      </div>
    </div>
  );
};
export default React.memo(MenuTop);
